<template>
  <div class="background"></div>
  <nav-bar></nav-bar>
  <div class="container">
    <div class="header">
      <div class="search-bar">
        <el-input
            v-model="content"
            placeholder="请输入学者名称"
            @keyup.enter="addSearch"
        >
          <template #append>
            <el-button :icon="search" @click="addSearch">检索</el-button>
          </template>
        </el-input>
      </div>

      </div>
    </div>

  <!--      排序栏-->
  <div class="sort-bar">
<!--    <button @click="changeCountSort()">count</button>-->
<!--    <button @click="changeCitedSort()">cited</button>-->
<!--    <div v-if="this.sortField">当前排序字段: {{this.sortField}}   {{this.sortOrder}}</div>-->
    <div class="sort-item">
      <div>发文数量</div>
      <div class="icons">
        <i class="el-icon-caret-top"
           @click="changeSort('paperCount', false, 0)"
           :class="{'active': sortNow === 0}"/>
        <i class="el-icon-caret-bottom"
           @click="changeSort('paperCount', true, 1)"
           :class="{'active': sortNow === 1}"/>
      </div>
    </div>
    <div class="sort-item">
      <div>被引频次</div>
      <div class="icons">
        <i class="el-icon-caret-top"
           @click="changeSort('citationCount', false, 2)"
           :class="{'active': sortNow === 2}"/>
        <i class="el-icon-caret-bottom"
           @click="changeSort('citationCount', true, 3)"
           :class="{'active': sortNow === 3}"/>
      </div>
    </div>
  </div>

    <div class="main" v-loading="loading">


<!--      展示栏-->
      <div class="display">
        <div class="author" v-for="item in resultList" v-if="resultList.length !== 0">

          <div class="imgContainer" >
            <img :src="(item.url) ? item.url: defaultImg" alt="" class="image" @click="jumpAuthor(item.id)"/>
          </div>

          <div class="describe">
            <div class="name" @click="jumpAuthor(item.id)">
               <div v-html="item.highlight"></div>
            </div>
            <div class="ins">
              {{ item.institution }}
            </div>
            <div class="count-data">
              <div>发文数量: {{item.paperCount}}</div>
              <div style="margin-left: 20px">被引频次: {{item.citationCount}}</div>
            </div>
          </div>

        </div>
        <div v-else class="No-Data" >
          无相应数据
        </div>
      </div>

    <!--      分页选择-->
      <div style="display: flex; justify-content: center; margin: 5px 0px 30px 0px;">
      <el-pagination layout="total, prev, pager, next, jumper"
                     style=""
                     :total="totalNumber"
                     :page-size="pageSize"
                     :current-page="currentPage"
                     @current-change="changePage"
                     @prev-click="prevPage"
                     @next-click="nextPage"
      >
      </el-pagination>
    </div>
  </div>

</template>

<script>
import axios from "../../utils/MyAxios";
import IndexNavBar from "../../components/PublicNavBar";
import {Search} from '@element-plus/icons-vue'

export default {
  name: "authorSearchBox",
  components: {
    'nav-bar': IndexNavBar
  },
  data() {
    return {
      sortNow: 1,
      chosenItem: {chosen: false},
      pageSize: 10,
      totalNumber: 0,
      currentPage: 1,
      loading: false,
      defaultImg: require('../assets/nohead.gif'),
      search: Search,
      content: '',
      filter: '',
      resultList: [],
      insList: [],
      chosenList: [],
      data: {
        track_total_hits: "true",
        _source: {
          includes: [],
          excludes: []
        },
        query: {
          bool: {
            must: {
              "match_phrase": {
                name: ''
              }
            }
          }
        },
        from: 0,
        size: 10,
        sort: [

        ],
        aggs: {},
        highlight: {
          pre_tags: "<font color='red'>",
          post_tags: "</font>",
          fields: {
            "name": {}
          }
        }
      }
    }
  },
  methods: {
    changeSort(way, order, now) {
      this.sortNow = now
      let temp = {}
      temp[way] = {}
      temp[way]["order"] = order ? "desc" : "asc"
      this.data.sort.splice(0, this.data.sort.length)
      this.data.sort.push(temp)
      this.askForData()
    },
    changeCountSort() {
      let way = 'paperCount'
      let order = this.countSort = !this.countSort
      this.sortField = '发文数量'
      this.sortOrder = order ? '降序' : '升序'
      let temp = {}
      temp[way] = {}
      temp[way]["order"] = order ? "desc" : "asc"
      this.data.sort.splice(0, this.data.sort.length)
      this.data.sort.push(temp)
      this.askForData()
    },
    changeCitedSort() {
      let way = 'citationCount'
      let order = this.citedSort = !this.citedSort
      this.sortField = '被引频次'
      this.sortOrder = order ? '降序' : '升序'
      let temp = {}
      temp[way] = {}
      temp[way]["order"] = order ? "desc" : "asc"
      this.data.sort.splice(0, this.data.sort.length)
      this.data.sort.push(temp)
      this.askForData()
    },
    addFilter(item) {
      let name = item.name
      let now = this.data.query.bool.must[0].nested.query.bool.must
      item.chosen = !item.chosen
      if (item.chosen)
      now.push({
        match_phrase: {
          "authors.affiliation" : name
        }
      })
      else
        now.pop()
      this.askForData()
    },
    changePage(newPage) {
      this.currentPage = newPage
      this.data.from = (this.currentPage - 1) * this.pageSize
      this.askForData()
    },
    prevPage() {
      this.data.from -= this.pageSize
      this.askForData()
    },
    nextPage() {
      this.data.from += this.pageSize
      this.askForData()
    },
    jumpAuthor(id) {
      const { href } = this.$router.resolve({
        path: '/portal',
        query: {
          authorId: id
        }
      })
      window.open(href, '_blank')
    },
    addSearch() {
      this.data.query.bool.must.match_phrase["name"] = this.content
      this.askForData()
    },
    askForData() {
      console.log(JSON.stringify(this.data))
      this.loading = true
      axios.post("http://121.36.3.252:9200/author/_search", this.data).then(res => {
        console.log(res);
        this.addResultList(res.data.hits.hits)
        this.totalNumber = res.data.hits.total.value
        this.loading = false;
      })
    },
    checkContain(str, pat) {
      let list = pat.split(/ +/)
      let result = false;
      str = str.toLowerCase()
      for (let i of list)
        result |= str.indexOf(i.toLowerCase()) !== -1
      // console.log(str, pat, result)
      return result
    },
    addResultList(data) {
      this.resultList.splice(0, this.resultList.length)
      for (let i of data) {
        let author = i._source
        this.resultList.push({
          id: author.id,
          url: '',
          name: author.name,
          institution: author.affiliation ? author.affiliation : "UNKNOWN",
          highlight: i.highlight.name[0],
          paperCount: author.paperCount,
          citationCount: author.citationCount
        })
      }
    },
    addInsList(list) {
      this.insList.splice(0, this.insList.length)
      for (let item of list) {
        this.insList.push({
          name: item.key,
          number: item.doc_count,
          chosen: false
        })
      }
    },
    askForUrl(id) {
      return ''
    }
  },
  created() {
    console.log(this.$route.query)
    this.content = this.$route.query.key
    this.includes = ['id', 'name', 'affiliation', 'imgUrl', 'paperCount', 'citationCount']
    if (this.content) {
      this.addSearch()
      this.changeSort("paperCount", true, 1)
    }

  }

}
</script>

<style scoped>

.background {
  background-image: url("../../index/assets/indexBackground.jpg");
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  z-index: -1;
  position: fixed;
  bottom: 0;
  opacity: 0.5;
}

.active {
  color: #0066ff;
}

.el-icon-caret-top:hover {
  color: #0066ff;
  cursor: pointer;
}

.el-icon-caret-bottom:hover {
  color: #0066ff;
  cursor: pointer;
}

.icons {
  display: flex;
  flex-flow: column wrap;
  margin-left: 5px;
  justify-content: center;
}

.sort-item {
  display: flex;
  align-items: center;
  justify-content: center;

  color: rgb(102, 102, 102);
  font-family: 宋体;
  font-size: 16px;

  border: 1px solid #e4e4e4;

  margin-right: 20px;
  padding: 5px;

  background-color: #ffffffC0;
}

.No-Data {
  width: 100%;
  height: 400px;

  display: flex;
  justify-content: center;
  font-family: 宋体;
  align-items: center;
  font-size: 30px;
  color: gray;
}

.describe {
  flex: 1;
  display: flex;
  flex-flow: column wrap;
}

.count-data {
  flex: 0 0 20%;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  padding: 0px 15px;

  color: rgb(102, 102, 102);
  font-family: 宋体;
  font-size: 12px;

}

.name {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  padding: 0px 15px;
  /*margin: 15px 0px 0px 20px;*/

  color: rgb(68, 68, 68);
  font-family: 宋体;
  font-size: 18px;
  cursor: pointer;
}

.ins {
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  padding: 0px 15px;
  /*margin: 5px 0px 0px 20px;*/

  color: rgb(102, 102, 102);
  font-family: 宋体;
  font-size: 12px;
}

.imgContainer {
  flex: 0 0 82px;
}



.image {
  width: 82px;
  height: 107px;
}

.author {
  display: flex;
  flex-flow: row wrap;
  flex: 0 0 40%;
  margin: 15px 20px;
  padding: 10px;

  border: 1px solid #e4e4e4;
  box-shadow: 0 5px 5px #cdcdcd;

  background-color: #ffffffC0;
}

.display {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;

}

.main {
  flex: 1;
  display: flex;
  flex-flow: column wrap;
  margin: 0px 15% 10px;
  border: 1px solid #e4e4e4;
  box-shadow: 0 5px 5px #cdcdcd;

  background-color: #ffffff80;
}



.name:hover {
  color: #0066ff;
  cursor: pointer;
}

.image:hover {
  cursor: pointer;
}


.container {
  display: flex;
  flex-flow: column wrap;
}


.header {
  flex: 1;
  display: flex;
  flex-flow: column wrap;
}

.search-bar {
  display: flex;
  justify-content: center;
  margin: 30px 15% 0px;
}

.sort-bar {
  display: flex;
  flex: 1;
  margin: 20px 15% 0px;
}

* {
  font-family: "Times New Roman", Serif;
}

</style>